﻿<#include "layout.ftl"/>
<#macro script_import>

<script src="${staticPath}/markdown/markdown-it.js"></script>
<script src="${staticPath}/markdown/markdown-it-footnote.js"></script>
<script src="${staticPath}/markdown/highlight.pack.js"></script>
<script src="${staticPath}/markdown/codemirror/lib/codemirror.js"></script>
<script src="${staticPath}/markdown/codemirror/overlay.js"></script>
<script src="${staticPath}/markdown/codemirror/xml/xml.js"></script>
<script src="${staticPath}/markdown/codemirror/markdown/markdown.js"></script>
<script src="${staticPath}/markdown/codemirror/gfm/gfm.js"></script>
<script src="${staticPath}/markdown/codemirror/javascript/javascript.js"></script>
<script src="${staticPath}/markdown/codemirror/css/css.js"></script>
<script src="${staticPath}/markdown/codemirror/htmlmixed/htmlmixed.js"></script>
<script src="${staticPath}/markdown/codemirror/lib/util/continuelist.js"></script>
<script src="${staticPath}/markdown/rawinflate.js"></script>
<script src="${staticPath}/markdown/rawdeflate.js"></script>
<link rel="stylesheet" href="${staticPath}/markdown/base16-light.css">
<link rel="stylesheet" href="${staticPath}/markdown/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="${staticPath}/markdown/default.css">
<link rel="stylesheet" href="${staticPath}/css/dropzone.min.css" rel="stylesheet">
<!--Bootbox Modals [ OPTIONAL ]-->
<script src="${staticPath}/js/bootbox.min.js"></script>
<!--Modals [ SAMPLE ]-->
<script src="${staticPath}/js/ui-modals.js"></script>
<!--Demo script [ DEMONSTRATION ]-->
<script src="${staticPath}/js/nifty-demo.min.js"></script>


<!--Dropzone [ OPTIONAL ]-->
<script src="${staticPath}/js/dropzone.min.js"></script>


<!--Form File Upload [ SAMPLE ]-->
<script src="${staticPath}/js/form-file-upload.js"></script>


<script src="${staticPath}/js/bootstrapvalidator.min.js"></script>


<script src="${staticPath}/page-js/article_edit.js"></script>
</#macro>
<#macro css_import>
<link href="${staticPath}/css/bootstrapvalidator.min.css" rel="stylesheet">



</#macro>
<#macro script>
<script type="text/javascript">

    // Because highlight.js is a bit awkward at times
    var languageOverrides = {
        js: 'javascript',
        html: 'xml'
    };


    var md = markdownit({
        html: true,
        highlight: function (code, lang) {
            if (languageOverrides[lang]) lang = languageOverrides[lang];
            if (lang && hljs.getLanguage(lang)) {
                try {
                    return hljs.highlight(lang, code).value;
                } catch (e) {
                }
            }
            return '';
        }
    })
            .use(markdownitFootnote);


    function update(e) {
        setOutput(e.getValue());
    }

    function setOutput(val) {
        val = val.replace(/<equation>((.*?\n)*?.*?)<\/equation>/ig, function (a, b) {
            return '<img src="http://latex.codecogs.com/png.latex?' + encodeURIComponent(b) + '" />';
        });

        var out = document.getElementById('out');
        var old = out.cloneNode(true);
        var newhtml = md.render(val);
        out.innerHTML = newhtml;

        //把值付给表单
        $("#markdownText").val(val);
        $("#text").val(newhtml);

        var allold = old.getElementsByTagName("*");
        if (allold === undefined) return;

        var allnew = out.getElementsByTagName("*");
        if (allnew === undefined) return;

        for (var i = 0, max = Math.min(allold.length, allnew.length); i < max; i++) {
            if (!allold[i].isEqualNode(allnew[i])) {
                out.scrollTop = allnew[i].offsetTop;
                return;
            }
        }
    }
    var editor = CodeMirror.fromTextArea(document.getElementById('content_html'), {
        mode: 'gfm',
        lineNumbers: false,
        matchBrackets: true,
        lineWrapping: true,
        theme: 'base16-light',
        extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
    });

    editor.on('change', update);


    document.addEventListener('drop', function (e) {
        e.preventDefault();
        e.stopPropagation();

        var reader = new FileReader();
        reader.onload = function (e) {
            editor.setValue(e.target.result);
        };

        reader.readAsText(e.dataTransfer.files[0]);
    }, false);
</script>
</#macro>
<#macro css>
<style>

    .CodeMirror pre {
        line-height: 16px;
    }

    .CodeMirror {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
    }

    .CodeMirror-scroll {
        padding: 30px;
        box-sizing: border-box;
    }

    #out {
        overflow: auto;
        padding: 10px;
        padding-left: 20px;
        color: #444;
        font-size: 16px;
    }

    .cm-quote {
        color: #90a959;
        font-style: italic;
    }

    a {
        color: #0645ad;
        text-decoration: none;
    }

    a:visited {
        color: #0b0080;
    }

    a:hover {
        color: #06e;
    }

    a:active {
        color: #faa700;
    }

    a:focus {
        outline: thin dotted;
    }

    a:hover, a:active {
        outline: 0;
    }

    p {
        margin: 1em 0;
    }

    img {
        max-width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
        color: #111;
        line-height: 1em;
    }

    h4, h5, h6 {
        font-weight: bold;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 2em;
        border-bottom: 1px solid silver;
        padding-bottom: 5px;
    }

    h3 {
        font-size: 1.5em;
    }

    h4 {
        font-size: 1.2em;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
        font-size: 0.9em;
    }

    blockquote {
        color: #666666;
        margin: 0;
        padding-left: 3em;
        border-left: 0.5em #EEE solid;
    }

    hr {
        display: block;
        height: 2px;
        border: 0;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #eee;
        margin: 1em 0;
        padding: 0;
    }

    #out pre, code {
        color: #FF0000;
        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
        font-size: 0.94em; /* 0.94 = 0.88 + (1.00 - 0.88) / 2 */
        border-radius: 3px;
        background-color: #F8F8F8;
        border: 1px solid #CCC;
    }

    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
        padding: 5px;
    }

    pre code {
        border: 0px !important;
        background: transparent !important;
        line-height: 1.3em;
    }

    code {
        padding: 0 3px 0 3px;
    }

    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    ul, ol {
        margin: 1em 0;
        padding: 0 0 0 2em;
    }

    li p:last-child {
        margin: 0
    }

    dd {
        margin: 0 0 0 2em;
    }

    img {
        border: 0;
        -ms-interpolation-mode: bicubic;
        vertical-align: middle;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    td, th {
        vertical-align: top;
        padding: 4px 10px;
        border: 1px solid #bbb;
    }

    tr:nth-child(even) td, tr:nth-child(even) th {
        background: #eee;
    }
</style>
</#macro>
<@layout>


<!--CONTENT CONTAINER-->
<!--===================================================-->
<div id="content-container">

    <!--Page Title-->
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <div id="page-title">
        <h1 class="page-header text-overflow">撰写文章</h1>

        <!--Searchbox-->
        <div class="searchbox">
            <div class="input-group custom-search-form">
                <input type="text" class="form-control" placeholder="Search..">
                            <span class="input-group-btn">
                                <button class="text-muted" type="button"><i class="demo-pli-magnifi-glass"></i></button>
                            </span>
            </div>
        </div>
    </div>
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <!--End page title-->


    <!--Breadcrumb-->
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li class="active">修改文章</li>
    </ol>
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <!--End breadcrumb-->


    <!--Page content-->
    <!--===================================================-->

    <div id="page-content">
        <#if content??>
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">基础信息</h3>
                </div>

                <!--Block Styled Form -->
                <!--===================================================-->

                <div class="panel-body">
                    <form id="basic-form">
                        <input type="hidden" id="attachmentId" name="attachmentId" value="0">
                        <input type="hidden" data-validate="true" id="id" name="id" value="${(content.id)!'0'}">
                        <div class="row">

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label">标题</label>
                                    <div class="input-group mar-btm">
                                        <div class="input-group-btn">
                                            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
                                                    type="button">
                                                类别 <i class="dropdown-caret"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <#list category as item>
                                                    <li><a href="#" cate-id="${item.id}">${item.title}</a></li>
                                                </#list>
                                                <li class="divider"></li>

                                            </ul>
                                        </div>
                                        <input type="hidden" data-validate="true" id="parentId" name="parentId" value="${content.parentId!'0'}">
                                        <input type="text" id="title" name="title" placeholder="标题" value="${content.title!}"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label">标签</label>
                                    <input type="text" id="tag" name="tag" placeholder="标签" value="${(content.tag)!}" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <label class="control-label">摘要</label>
                            <textarea placeholder="摘要" id="summary" name="summary" rows="5"
                                      class="form-control">${(content.summary)!}</textarea>
                            </div>
                        </div>

                    </form>
                </div>
                <!--===================================================-->
                <!--End Block Styled Form -->

            </div>

            <div class="panel">

                <div class="panel-body">
                    <div class="row">
                        <label class="control-label">缩略图</label>
                    </div>
                    <!--Dropzonejs-->
                    <!--===================================================-->
                    <form id="demo-dropzone" action="${basePath}/attachment/upload" class="dropzone">
                        <div class="dz-default dz-message">
                            <div class="dz-icon">
                                <i class="demo-pli-upload-to-cloud icon-5x"></i>
                            </div>
                            <div>
                                <span class="dz-text">Drop files to upload</span>
                                <p class="text-sm text-muted">or click to pick manually</p>
                            </div>
                        </div>
                        <div class="fallback">
                            <input name="file" id="file" type="file">
                        </div>

                    </form>
                    <!--===================================================-->
                    <!-- End Dropzonejs -->

                </div>
            </div>

            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">正文</h3>
                </div>
                <!--Bootstrap Markdown-->
                <!--===================================================-->
                <div class="panel-body">
                    <form>
                        <p><strong>Bootstrap-Markdown</strong> designed to be easily integrated with your bootstrap
                            project. It exposes useful API that allow you to fully hook-in into the plugin<br>
                            Switch regular textarea within your form into <strong>Bootstrap-Markdown</strong> editor
                            seamlessly by adding <code class="prettyprint">data-provide="markdown"</code> attribute</p>
                        <br>
                            <textarea id="content_html" name="content_html" data-provide="markdown" rows="10"
                                      placeholder="Please Use MarkDown">${(content.markdownText)!}</textarea>
                        <input type="hidden" name="markdownText" id="markdownText" value="${(content.markdownText)!}">
                        <input type="hidden" name="text" id="text" value="${(content.text)!}">
                        <br>
                        <p><strong>预览</strong></p>
                        <div id="out">${(content.text)!}</div>
                    </form>
                </div>
                <!--===================================================-->
                <!-- End Bootstrap Markdown -->

            </div>

            <div class="panel">

                <div class="panel-footer text-right">
                    <button class="btn btn-success" type="button" id="submit">Submit</button>
                </div>

            </div>
        <#else>
            <div class="alert alert-danger">
                <strong>抱歉!</strong> 未查询到该条数据.<span><a href="/admin/article/list" class="alert-link">返回列表</a></span>
            </div>
        </#if>
    </div>
    <!--===================================================-->
    <!--End page content-->


</div>
<!--===================================================-->
<!--END CONTENT CONTAINER-->


</@layout>
